<template>
    <div>
      <!--面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--卡片区域-->
      <el-card>
        <el-button style="float: right" type="primary" @click="addGoodDialogVisible=true" >添加按钮</el-button>
       <el-table :data="goodList" border stripe>
         <el-table-column type="index"></el-table-column>
         <el-table-column label="名称" prop="name"></el-table-column>
         <el-table-column label="价格" prop="money"></el-table-column>
         <el-table-column label="路径" prop="path"></el-table-column>
         <el-table-column label="等级" prop="level">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.level==='0'">一级</el-tag>
             <el-tag type="success" v-if="scope.row.level==='1'">二级</el-tag>
             <el-tag v-if="scope.row.level==='2'" type="warning">三级</el-tag>
           </template>
         </el-table-column>
       </el-table>
      </el-card>
      <!--添加商品列表-->
      <el-dialog
        title="提示"
        :visible.sync="addGoodDialogVisible"
        width="50%" @close="addGoodsDialogClose">
        <!--名称 价格 路径 "等级-->
        <el-form :model="addGoodsForm" :rules="addGoodsRule"  ref="addGoodsRef" label-width="70px" >
<!--          <el-form-item label="编号" prop="id">-->
<!--            <el-input v-model="addGoodsForm.id"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="名称" prop="name">
            <el-input v-model="addGoodsForm.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="money">
            <el-input v-model="addGoodsForm.money"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="path">
            <el-input v-model="addGoodsForm.path"></el-input>
          </el-form-item>
          <el-form-item label="等级" prop="level">
            <el-input v-model="addGoodsForm.level"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
    <el-button @click="addGoodDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addGoods">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
  import  axios from 'axios'
    export default {
        name: "Goods",
      data(){
       return{
         //商品列表
          goodList:[],
         //添加商品对话框
         addGoodDialogVisible:false,
         //添加商品表单
         addGoodsForm:{
           // id:'',
           name:'',
           money:'',
           path:'',
           level:''
         },
         //添加商品规则
         addGoodsRule: {
           // id: [
           //   {required: true, message: '请输入id号', trigger: 'blur'},
           //   {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'}
           // ],
           name: [
             {required: true, message: '请输入商品名称', trigger: 'blur'},
             {min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur'}
           ],
           money: [
             {required: true, message: '请输入价格', trigger: 'blur'},
             {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
           ],
           path: [
             {required: true, message: '请输入路径', trigger: 'blur'},
             {min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur'}
           ],
           level: [
             {required: true, message: '请输入等级', trigger: 'blur'},
             {min: 1, message: '长度在1个字符', trigger: 'blur'}
           ],
         },
        }
      },
      created() {
          //获取商品列表
          this.getGoodsList()
      },
      methods:{
       async getGoodsList(){
          const res= await axios.get("http://localhost:3000/goods")
         if (res.data.meta.status!=200){
           return  this.$message.error("获取列表信息失败")
         }else {
           this.goodList=res.data.data
         }
        },
        //添加商品
       async addGoods(){
         this.$refs.addGoodsRef.validate(async valid=>{
           if (!valid){
             return
           }else {
             const res=await axios.post("http://localhost:3000/addGoods", {userMsg: this.addGoodsForm})
             console.log(res)
             if (res.data.meta.status!==200){
                return  this.$message.error("添加商品失败")
              }else{
                 this.$message.success("添加商品成功")
                this.getGoodsList()
                this.addGoodDialogVisible=false
              }
           }
         })
        },
        //监听对话框关闭
        addGoodsDialogClose(){
          this.$refs.addGoodsRef.resetFields()
        }
      }
    }
</script>

<style scoped>

</style>
